<!--
 * @Author: 杜二康 3224811364@qq.com
 * @Date: 2025-09-03 16:29:39
 * @LastEditors: 杜二康 3224811364@qq.com
 * @LastEditTime: 2025-09-10 14:09:12
 * @FilePath: \igw\components\LanguageSelector.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div>
    <div class="relative" ref="languageSelectorRef">
      <button
        @click="showLanguageList = true"
        class="flex items-center gap-2 h-8 px-3 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-200"
      >
        <Globe class="w-4 h-4 flex-shrink-0" />
        <span class="hidden sm:inline leading-none">
          {{ currentLocale?.flag }}
          {{ currentLocale?.nativeName }}
        </span>
        <span class="sm:hidden leading-none">
          {{ currentLocale?.flag }}
        </span>
      </button>
      <div
        v-if="showLanguageList"
        class="w-64 p-2 bg-white/95 backdrop-blur-xl border-slate-200 shadow-lg absolute"
      >
        <div class="px-3 py-2 border-b border-slate-100 mb-2">
          <p class="text-sm font-medium text-slate-700">
            {{ currentLocale.code }}
          </p>
          <p class="text-xs text-slate-500">
            {{ currentLocale.name }}: {{ currentLocale?.name }}
          </p>
        </div>
        <div
          v-for="lang in locales"
          :key="lang.code"
          class="flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-slate-50 rounded-lg transition-colors focus:bg-slate-100 focus:outline-none"
          @click="handleLanguageChange(lang.code)"
        >
          <div class="flex items-center gap-3">
            <span class="text-lg">{{ lang.flag }}</span>
            <div>
              <div class="text-sm font-medium text-slate-700">
                {{ lang.nativeName }}
              </div>
              <div class="text-xs text-slate-500">
                {{ lang.name }}
              </div>
            </div>
          </div>

          <Transition name="scale-in">
            <div v-if="locale === lang.code">
              <Badge
                class="bg-blue-100 text-blue-700 border-blue-200 h-5 px-2"
                variant="secondary"
              >
                <Check class="w-3 h-3" />
              </Badge>
            </div>
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from "vue";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./dropdown";
import { Globe, Check } from "lucide-vue-next";

const { locale, locales, setLocale, t } = useI18n();
const showLanguageList = ref(false);
console.log("object", locale.value, locales.value);
const currentLocale = computed(() =>
  locales.value.find((l) => l.code === locale.value)
);

const handleLanguageChange = (langCode) => {
  console.log("object", langCode);
  setLocale(langCode);
  showLanguageList.value = false;
};
const languageSelectorRef = ref(null);

const handleClickOutside = (event) => {
  if (languageSelectorRef.value && !languageSelectorRef.value.contains(event.target)) {
    showLanguageList.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

console.log("object,", locales.value);
</script>

<style scoped>
.scale-in-enter-active,
.scale-in-leave-active {
  transition: transform 0.2s ease;
}

.scale-in-enter-from,
.scale-in-leave-to {
  transform: scale(0);
}
</style>
